import React from 'react'
import { useNavigate } from 'react-router-dom'
import { NavBar } from 'antd-mobile'
import PropTypes from 'prop-types'

// 我们应该要考虑到用户是否默认要进行某些操作

// 导入css module 类型的 css 文件
import styles from './index.module.css'

export default function NavHeader({ children, onLeftClick, className, rightContent }) {
    const navigate = useNavigate()
    const defaultHandler = () => navigate(-1)
    return <NavBar
        className={[styles.navBar, className || ''].join()}
        onBack={onLeftClick || defaultHandler}
        backArrow={<i className="iconfont icon-back" />}
        right={rightContent}
    >
        {children}
    </NavBar>
}
NavHeader.propTypes = {
    children: PropTypes.string.isRequired,
    onLeftClick: PropTypes.func,
    className:PropTypes.string,
    rightContent:PropTypes.array
}